<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>优惠券管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="/static/css/user.css" media="all">
</head>
<style>
    .layui-layer {
        height: auto!important;
        top: 50px!important;
    }
    .layui-layer-content {
        height: auto;
    }
</style>

<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <table class="layui-hide" id="test-table-totalRow" lay-filter="test-table-totalRow"></table>
                    <script type="text/html" id="test-table-totalRow-toolbarDemo">
                        <div class="layui-btn-container">
                            <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="updateMerchant">添加</button>
                            <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="updateCoupon">修改</button>
                        </div>
                    </script>
                </div>
            </div>
        </div>
    </div>

</div>


<!-- 新增优惠券弹窗 -->
<div id="updateMerchant" class="layui-mask-label"
     style="display: none; padding: 20px">
    <form class="layui-form" action="">
        <div class="layui-inline layui-form-item" >
            <label class="layui-form-label" style="width: 120px">优惠券名称：</label>
            <div class="layui-input-inline">
                <input type="text" name="name"  autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-inline layui-form-item" >
            <label class="layui-form-label" style="width: 120px">可用于：</label>
            <div class="layui-input-inline layui-short-select" >
                <select  name="used" lay-filter="auditStatus">
                    <option value="10">店铺优惠券</option>
                    <option value="20">商品优惠券</option>
                </select>
            </div>
        </div>
        <div class="layui-inline layui-form-item" >
            <label class="layui-form-label" style="width: 120px">优惠券类型：</label>
            <div class="layui-input-inline layui-short-select" >
                <select  name="type" lay-filter="auditStatus">
                    <option value="0">满减券</option>
                    <option value="1">叠加满减券</option>
                    <option value="2">无门槛券</option>
                </select>
            </div>
        </div>

        <div class="layui-inline layui-form-item" >
            <label class="layui-form-label" style="width: 120px">发行量(张)：</label>
            <div class="layui-input-inline">
                <input type="text" name="quota"  autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-inline layui-form-item" >
            <label class="layui-form-label" style="width: 120px">优惠券面额(元)：</label>
            <div class="layui-input-inline">
                满
                <input type="text" name="withAmount"  autocomplete="off"
                       class="layui-input">
                减
                <input type="text" name="usedAmount"  autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-inline layui-form-item">
            <label class="layui-form-label" style="width: 120px">发放开始时间</label>
            <div class="layui-input-inline">
                <input type="text" name="startTime" class="layui-input" id="s_start_time" placeholder="" autocomplete="off" >
            </div>
        </div>
        <div class="layui-inline layui-form-item">
            <label class="layui-form-label" style="width: 120px">发放结束时间</label>
            <div class="layui-input-inline">
                <input type="text" name="endTime" class="layui-input" id="s_end_time" placeholder="" autocomplete="off" >
            </div>
        </div>

        <div class="layui-inline layui-form-item">
            <label class="layui-form-label" style="width: 120px">使用开始时间</label>
            <div class="layui-input-inline">
                <input type="text" name="validStartTime" class="layui-input" id="s_valid_start_time" placeholder="" autocomplete="off" >
            </div>
        </div>
        <div class="layui-inline layui-form-item">
            <label class="layui-form-label" style="width: 120px">使用结束时间</label>
            <div class="layui-input-inline">
                <input type="text" name="validEndTime" class="layui-input" id="s_valid_end_time" placeholder="" autocomplete="off" >
            </div>
        </div>

        <div class="layui-inline layui-form-item">
            <label class="layui-form-label" style="width: 120px">使用描述</label>
            <div class="layui-input-inline">
                <input type="text" name="desc"  autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item" style="margin-top: 20px">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="updateMerchant">新增</button>
                <button type="reset" class="layui-btn layui-btn-primary closeBtn">取消</button>
            </div>
        </div>
    </form>
</div>


<!-- 修改优惠券弹窗 -->
<div id="updateCoupon" class="layui-mask-label"
     style="display: none; padding: 20px">
    <form class="layui-form" action="">
        <div class="layui-inline layui-form-item" >
            <label class="layui-form-label" style="width: 120px">优惠券名称：</label>
            <div class="layui-input-inline">
                <input type="text" name="name"  autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-inline layui-form-item" >
            <label class="layui-form-label" style="width: 120px">可用于：</label>
            <div class="layui-input-inline layui-short-select" >
                <select  name="used" lay-filter="auditStatus">
                    <option value="10">店铺优惠券</option>
                    <option value="20">商品优惠券</option>
                </select>
            </div>
        </div>
        <div class="layui-inline layui-form-item" >
            <label class="layui-form-label" style="width: 120px">优惠券类型：</label>
            <div class="layui-input-inline layui-short-select" >
                <select  name="type" lay-filter="auditStatus">
                    <option value="0">满减券</option>
                    <option value="1">叠加满减券</option>
                    <option value="2">无门槛券</option>
                </select>
            </div>
        </div>

        <div class="layui-inline layui-form-item" >
            <label class="layui-form-label" style="width: 120px">发行量(张)：</label>
            <div class="layui-input-inline">
                <input type="text" name="quota"  autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-inline layui-form-item" >
            <label class="layui-form-label" style="width: 120px">优惠券面额(元)：</label>
            <div class="layui-input-inline">
                满
                <input type="text" name="withAmount"  autocomplete="off"
                       class="layui-input">
                减
                <input type="text" name="usedAmount"  autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-inline layui-form-item">
            <label class="layui-form-label" style="width: 120px">发放开始时间</label>
            <div class="layui-input-inline">
                <input type="text" name="startTime" class="layui-input" id="u_start_time" placeholder="" autocomplete="off">
            </div>
        </div>
        <div class="layui-inline layui-form-item">
            <label class="layui-form-label" style="width: 120px">发放结束时间</label>
            <div class="layui-input-inline">
                <input type="text" name="endTime" class="layui-input" id="u_end_time" placeholder="" autocomplete="off">
            </div>
        </div>

        <div class="layui-inline layui-form-item">
            <label class="layui-form-label" style="width: 120px">使用开始时间</label>
            <div class="layui-input-inline">
                <input type="text" name="validStartTime" class="layui-input" id="u_valid_start_time" placeholder="" autocomplete="off">
            </div>
        </div>
        <div class="layui-inline layui-form-item">
            <label class="layui-form-label" style="width: 120px">使用结束时间</label>
            <div class="layui-input-inline">
                <input type="text" name="validEndTime" class="layui-input" id="u_valid_end_time" placeholder="" autocomplete="off">
            </div>
        </div>

        <div class="layui-inline layui-form-item">
            <label class="layui-form-label" style="width: 120px">使用描述</label>
            <div class="layui-input-inline">
                <input type="text" name="desc"  autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item" style="margin-top: 20px">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="updateCoupon">修改</button>
                <button type="reset" class="layui-btn layui-btn-primary closeBtn">取消</button>
            </div>
        </div>
        <input type="hidden" name="id"  />

    </form>
</div>


<script src="/static/layuiadmin/layui/layui.js"></script>

<script>
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'laydate', 'form'], function() {
        var $ = layui.jquery;
        var table = layui.table;

        //表单重新渲染
        function renderForm() {
            layui.use('form', function() {
                var form = layui.form;
                form.render();
            });
        }

        table.render({
            elem: '#test-table-totalRow',
            toolbar:'#test-table-totalRow-toolbarDemo',
            autoSort: false,
            url: '/coupon/list',
            method: 'post',
            title: '优惠券列表',
            totalRow: true,
            initSort: {field:'ctime', type:'desc'},
            cols: [[
                {type:'checkbox',fixed:'left'},
                {field:'name', title:'优惠券名称', align:'center'},
                {field:'quota', title:'发行量', align:'center'},
                {field:'type', title:'优惠券类型', align:'center', templet:function(d){
                        if(d.type == 0){
                            return '满减券';
                        }else if(d.type == 1){
                            return '叠加满减券'
                        } else if (d.type == 2) {
                            return '无门槛券'
                        }
                        return "无门槛券";
                    }},
                {field:'used', title:'优惠券用途',align:'center', templet:function(d){
                        if(d.used == 10){
                            return '店铺优惠券';
                        }else if(d.used == 20){
                            return '商品优惠券'
                        }
                        return "店铺优惠券";
                    }},
                {field:'withAmount', title:'优惠券面额', align:'center', templet:function(d){
                        return `满` + d.withAmount + `减` + d.usedAmount + '元';
                    }},
                {field:'startTime', width: 160, title:'发行开始时间', align:'center'},
                {field:'endTime', width: 160, title:'发行结束时间', align:'center'},
                {field:'validStartTime', width: 160, title:'使用开始时间', align:'center'},
                {field:'validEndTime', width: 160, title:'使用结束时间', align:'center'},
                // {field:'desc', title:'使用描述', align:'center'},
            ]],
            page: true
        });

        table.on('sort(test-table-totalRow)', function(obj) {
            table.reload('test-table-totalRow', {
                initSort : obj,
                where : {
                    sortField : obj.field,
                    sortType : obj.type
                }
            });
        });

        var form = layui.form;

        // 日期选择器
        layui.laydate.render({elem: '#s_start_time',format: 'yyyy-MM-dd HH:mm:ss',trigger: 'click' });

        layui.laydate.render({elem: '#s_end_time', format: 'yyyy-MM-dd HH:mm:ss' ,trigger: 'click'});

            layui.laydate.render({elem: '#s_valid_start_time' ,format: 'yyyy-MM-dd HH:mm:ss', trigger: 'click'});
            layui.laydate.render({elem: '#s_valid_end_time',format: 'yyyy-MM-dd HH:mm:ss',trigger: 'click' });


        layui.laydate.render({elem: '#u_start_time',format: 'yyyy-MM-dd HH:mm:ss' ,trigger: 'click'});
        layui.laydate.render({elem: '#u_end_time', format: 'yyyy-MM-dd HH:mm:ss' ,trigger: 'click'});

            layui.laydate.render({elem: '#u_valid_start_time' ,format: 'yyyy-MM-dd HH:mm:ss',trigger: 'click'});
            layui.laydate.render({elem: '#u_valid_end_time' ,format: 'yyyy-MM-dd HH:mm:ss',trigger: 'click'});

        //头工具栏事件
        table.on('toolbar(test-table-totalRow)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            var data = checkStatus.data;

            switch(obj.event){
                case 'updateCoupon':
                    if(data.length<1){
                        layer.msg('至少选择一项');
                        break;
                    }else if(data.length>1){
                        layer.msg('最多选择一项');
                        break;
                    }else{
                        console.log(data)
                        var id = data[0].id;
                        var validStartTime = data[0].validStartTime;
                        var validEndTime = data[0].validEndTime
                        var startTime = data[0].startTime;
                        var endTime = data[0].endTime;
                        var name = data[0].name;
                        var type = data[0].type;
                        var withAmount = data[0].withAmount;
                        var usedAmount = data[0].usedAmount;
                        var used = data[0].used;
                        var quota = data[0].quota;
                        var desc = data[0].desc

                        $("#updateCoupon input[name='validStartTime']").val(validStartTime);
                        $("#updateCoupon input[name='validEndTime']").val(validEndTime);
                        $("#updateCoupon input[name='startTime']").val(startTime);
                        $("#updateCoupon input[name='endTime']").val(endTime);
                        $("#updateCoupon input[name='name']").val(name);
                        $("#updateCoupon input[name='type']").val(type);
                        $("#updateCoupon input[name='withAmount']").val(withAmount);
                        $("#updateCoupon input[name='usedAmount']").val(usedAmount);
                        $("#updateCoupon input[name='used']").val(used);
                        $("#updateCoupon input[name='quota']").val(quota);
                        $("#updateCoupon input[name='desc']").val(desc);

                        $("#updateCoupon input[name='id']").val(id);
                        renderForm();
                    }
                    layer.open({
                        type: 1,
                        title: "修改优惠券",
                        area : [ '450px', '450px' ], //宽高
                        content:$("#updateCoupon")
                    });
                    break
                case 'updateMerchant':

                    layer.open({
                        type: 1,
                        title: "新增优惠券",
                        area : [ '450px', '350px' ], //宽高
                        content:$("#updateMerchant")
                    });


                    break;


            };
        });

        //新增提交
        form.on('submit(updateMerchant)', function(data) {
            //layer.alert(JSON.stringify(data.field), {title: '最终的提交信息'});
            $.post('/coupon/add',
                data.field, function(res) {
                    var data = res;
                    if (data.success) {
                        layer.closeAll();
                        layer.msg("添加成功", {
                            icon : 6
                        });
                        table.reload('test-table-totalRow');
                    } else {
                        layer.msg(data.msg, {
                            icon : 5
                        });
                    }
                });
            return false;
        });
        //修改信息提交
        form.on('submit(updateCoupon)', function(data) {
            $.post('/coupon/update',
                data.field, function(res) {
                    var data = res;
                    if (data.success) {
                        layer.closeAll();
                        layer.msg("修改成功", {
                            icon : 6
                        });
                        table.reload('test-table-totalRow');
                    } else {
                        layer.msg(data.msg, {
                            icon : 5
                        });
                    }
                });
            return false;
        });
        //关闭弹窗
        $('.closeBtn').click(function() {
            layer.closeAll();
        });
    });
</script>

</body>

</html>